const myMixin = {
    props: {
        tabType: {
            type: [String, Number],
            default: 1
        },
        tabArr: {
            type: Array,
            default: () => [
                "菜单一",
                "菜单二",
                "菜单三",
                "菜单四",
                "菜单六",
                "菜单七",
                "菜单八",
                "菜单九"
            ]
        },
        tab_item_width: {
            type: Number,
            default: 80
        },
        tab_slide_width: {
            type: Number,
            default: 200
        },
        tabItemEdgeDistance: {
            type: Number,
            default: 10
        },
        tab_item_height:{
            type: Number,
            default: 35
        }
    },
    data() {
        return {
            tabKey: 0,
            translate: 0
        };
    },
    methods: {
        onClick(i) {
            this.tabKey = i;
            this.$emit('select', i)
            let {
                tab_item_width,
                tab_slide_width,
                translate,
                tabItemEdgeDistance
            } = this;
            let allWidth = (i + 1) * (tab_item_width + tabItemEdgeDistance); //计算点击元素整体到最边的距离；
            // 元素到边总距离是否大于容器总宽度小于时 --则偏移距离设置为前一个元素到边的总距离+margin；
            if (allWidth <= tab_slide_width) {
                /*
                 * 如果前一个元素到边的总距离小于偏移量则不需要移动，
                 * eg：加载完成后展示三个元素
                 * 点击第二个时不要设置移动正常点击显示即可  
                 * 
                 * */
                if (i * (tab_item_width + tabItemEdgeDistance) > translate) return;
                this.translate = i * (tab_item_width + tabItemEdgeDistance);
            } else {  // 元素到边总距离是否大于容器总宽度大于时 
                /**
                 * 如果偏移距离判断大于元素位置到最边的距离 
                 * 说明 元素被左侧遮挡 需要减少偏移距离；
                 * 此时将前一个元素到边的总距离+margin；设置为偏移距离即可；
                 * 
                 * */
                let edgeDis = i * (tab_item_width + tabItemEdgeDistance) + tabItemEdgeDistance;//前一个元素到边的总距离+margin；
                if (translate > edgeDis) {
                    this.translate = edgeDis;
                    return;
                }
                /**
                 * 偏移距离+容器总宽度大于整个元素到边的总距离 
                 * 说明元素目前整体处于可视区域之内不需要设置偏移
                 * 返回即可
                 * */
                if ((translate + tab_slide_width) > (i + 1) * (tab_item_width + tabItemEdgeDistance)) return;
                /**
                 * 到此处说明元素被右侧遮挡
                 * 此时元素到边总距离减去容器宽度
                 * 即为偏移量
                */
                this.translate = allWidth - tab_slide_width;
            }


        },
        onLeftClick() {
            let translate = this.translate;
            if (translate <= 100) {
                translate = 0;
            } else {
                translate -= this.tab_item_width * 2;
            }
            this.translate = translate;
        },
        onRightClick() {
            let translate = this.translate;
            translate += this.tab_item_width * 2;
            let leftEdge =
                this.$refs["tab-item-box"].scrollWidth - this.tab_slide_width;
            if (translate > leftEdge) {
                translate = leftEdge;
            }
            this.translate = translate;
        }
    }
}

export default myMixin;